import React, { Component } from 'react';
// import { connect } from 'react-redux';
import './index.less';
import {get, post} from '@api/index.js'
import cookie from 'react-cookies'


export default class Login extends Component {
  constructor(props){
    super(props)
    this.loginCon = [
      'hello gays please enter your name!',
      ''
    ]
    this.isNone= false
  }

  handleEditorChange(e) {
    console.log('Content was updated:', e.target.getContent());
  }
  hiddenDot(bl){
    this.isNone = bl;
    this.setState({
      isNone : this.isNone
    })
  }
  keyUp(e){
    if(e.keyCode === 13){
      this.loginCon[this.loginCon.length - 1] = e.currentTarget.value;
      const errorMsg = ['please input i am pig','']
      const successMsg = ['You are right! login success! enjoy your trip～']
      if(e.currentTarget.value.toLocaleLowerCase() === 'i am pig'){
        this.loginCon = this.loginCon.concat(successMsg)
        post('/api/login', {key: 'i am pig'}).then( res => {
          console.log(res)
          if(res && res.data){
            cookie.save('blog-cookie', res.data);
          }
        })
      }else{
        this.loginCon = this.loginCon.concat(errorMsg)
      }
      this.isNone = true;
      this.setState({
        isNone: this.isNone,
        loginCon: this.loginCon
      })
    }
  }
  render(){
    return <div className="home-login__content">
      {
        this.loginCon.map( (v,k) => {
          return v ? (<div className="home-login__p" key={k}> 
                   ><div>{v}</div>
          </div> ) : 
            (<div className="home-login__p" key={k}>
                    > <div className={`home-login__p__block ${this.isNone ? 'none': ''}`}></div>
              <input autoFocus="autoFocus" onKeyUp = { (e) => this.keyUp(e)}
                onFocus= { () => this.hiddenDot(true)} 
                onBlur= { () => this.hiddenDot(false)} 
                className="home-login__p__password" type="text"/>
            </div>)
        })
      }
    </div>
  }
}

// export default Login
// const mapStateToProps = state => {
//   return {
//     list: state.list
//   };
// };

// export default connect(mapStateToProps, { add, del })(Home);
